<template>
  <div>
    <div v-if="childrenReply.replyList.length == 0">
      <div class="item">
        <div class="reply-content">
          <span class="from-name">{{ childrenReply.fromName }}</span> <span>: </span>
          <span class="to-name" v-if="childrenReply.toId">@{{ childrenReply.toName }}</span>
          <span>{{ childrenReply.content }}</span>
        </div>
        <div class="reply-bottom">
          <span>{{ childrenReply.createTime }}</span>
          <span class="reply-text" @click="childReplyTo(childrenReply)"
                v-if="childrenReply.fromId != $store.getters.userInfo.id">
                        <i class="el-icon-chat-square"></i>
                        <span>回复</span>
                    </span>
          <span class="reply-delete" v-if="childrenReply.fromId == $store.getters.userId"
                @click="$store.dispatch('deleteComment', childrenReply)">
                        <i class="el-icon-delete"></i>
                        <span>删除</span>
                    </span>
        </div>
        <comment-box class="show-comment" :id="childrenReply.commentId" :to-info="childrenReply"
                     :current-page="currentPage" :page-size="pageSize"></comment-box>
      </div>
    </div>
    <div v-else>
      <div class="item">
        <div class="reply-content">
          <span class="from-name">{{ childrenReply.fromName }}</span> <span>: </span>
          <span class="to-name" v-if="childrenReply.toId">@{{ childrenReply.toName }}</span>
          <span>{{ childrenReply.content }}</span>
        </div>
        <div class="reply-bottom">
          <span>{{ childrenReply.createTime }}</span>
          <span class="reply-text" @click="childReplyTo(childrenReply)"
                v-if="childrenReply.fromId != $store.getters.userInfo.id">
                        <i class="el-icon-chat-square"></i>
                        <span>回复</span>
                    </span>
          <span class="reply-delete" v-if="childrenReply.fromId == $store.getters.userId"
                @click="$store.dispatch('deleteComment', childrenReply)">
                      <i class="el-icon-delete"></i>
                      <span>删除</span>
                    </span>
        </div>
        <comment-box class="show-comment" :id="childrenReply.commentId" :to-info="childrenReply"
                     :current-page="currentPage" :page-size="pageSize"></comment-box>
      </div>
      <div :style="getStyle" v-for="item in childrenReply.replyList">
        <comment-item :children-reply="item"></comment-item>
      </div>
    </div>
  </div>
</template>

<script>
import CommentBox from '@/components/Comment/CommentBox'
import {addComment, deleteComment} from "@/api/comment";

export default {
  name: "CommentItem",
  components: {CommentBox},
  props: {
    childrenReply: {},
    currentPage: {
      type: Number
    },
    pageSize: {
      type: Number
    }
  },
  computed: {
    getStyle() {
      let i = 0
      i += 15
      return 'margin-left:' + i + 'px'
    },
  },
  methods: {
    childReplyTo(to) {
      //显示和隐藏回复框
      let lists = document.getElementsByClassName("show-comment");
      for (let i = 0; i < lists.length; i++) {
        lists[i].style.display = 'none';
      }
      document.getElementById(to.commentId).style.display = 'block';
    },
    handleDelete(row) {
      this.$confirm('确定删除该评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteComment(row.commentId, row.blogId).then(res => {
          if (res.status) {
            this.$message.success('删除成功')
            this.$store.commit('SET_COMMENT_LIST', res.data)
          }
        })
      }).catch(() => {
      });

    }
  },

}
</script>

<style scoped>

</style>
